<template>
  <div>
    <div id="map" class="mapC"></div>
    <div id="popup" class="ol-popup">
      <a @click="closerDiv" href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import Overlay from 'ol/Overlay'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import {toLonLat} from 'ol/proj'
import {toStringHDMS} from 'ol/coordinate'
export default {
  name: 'index',
  data () {
    return {
      map: null,
      overlay: null,
      content: null,
      closer: null,
      container: null
    }
  },
  mounted () {
    this.container = document.getElementById('popup')
    this.content = document.getElementById('popup-content')
    this.closer = document.getElementById('popup-closer')
    this.initMap()
  },
  methods: {
    initMap () {
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.overlay = new Overlay({
        element: this.container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      this.map = new Map({
        layers: [this.raster, this.raster2],
        overlays: [this.overlay],
        target: 'map',
        view: new View({
          center: [108.2, 29.07],
          zoom: 4,
          projection: 'EPSG:4326'
        })
      })
      this.map.on('singleclick', (evt) => {
        const coordinate = evt.coordinate
        const hdms = toStringHDMS(toLonLat(coordinate))

        document.getElementById('popup-content').innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>'
        this.overlay.setPosition(coordinate)
      })
    },
    closerDiv () {
      this.overlay.setPosition(undefined)
      this.closer.blur()
      return false
    }
  }
}
</script>

<style scoped>
  .mapC{
    width: 100vw;
    height: 100vh;
  }
  .ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .ol-popup-closer:after {
    content: "✖";
  }

</style>
